<template>
  <div data-v-xxx class="video">
    <p data-v-xxx>视频</p>
    <my-left data-v-xxx />
  </div>
</template>

<script>
import MyLeft from './components/MyLeft'
export default {
  name: 'MyVideo',
  components: {
    MyLeft
  }
}
</script>

<!--
  加了scoped代表这个样式只能给当前组件写过的标签用
  那就意味着不能作用到组件内部的标签（组件根标签可以）
  原理：
    scoped会把当前组件写过的标签加上data-v-hash值的行内属性
    并把样式选择器变成交集选择器，交data-v-hash
    就通过这两套方式保证了这个样式只能用在当前组件写过的标签上
 -->
<style  scoped>
/* 深度作用选择器，也叫样式穿透 */
/* 建议用/deep/或者::v-deep*/
/* 因为less不支持>>>*/
/* 但是为什么 /deep/ 和 ::v-deep之间又推荐 ::v-deep */
::v-deep p {
  color: red;
}
</style>
